<template>
  <div
      class="article-list"
      :class="{'overflow-auto':!true}"
      :infinite-scroll-disabled="!true"
      v-infinite-scroll="loadArticle"
  >
    <article-item
        v-for="article in articles"
        :key="article.articleId"
        :article-info="article"
    />
  </div>
</template>

<script>
import ArticleItem from "@/views/home/components/main-body/article-item";
import article from "@/api/article";

export default {
  name: "article-list",
  components: {ArticleItem},
  data() {
    return {
      articles: [],
      pageNo: 1,
      pageSize: 10,
      disable: false
    }
  },
  methods: {
    // 动态加载文章列表
    loadArticle() {
        article.getList(this.pageNo, this.pageSize,this.userInfo.userId)
            .then((res) => {
              if (res.code === 200) {
                this.articles.push(...res.data)
                if (this.articles.length >= res.length) this.disable = true
                console.log(this.disable)
                this.pageNo++
              } else {
                this.$error(res.msg)
                this.errorCatch()
              }
            })
            .catch((err) => {
              this.$error(err)
              this.errorCatch()
            })
    },
    // 错误处理
    errorCatch() {
      this.pageNo = this.articles.length / 10
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  background-color: #ffffff;
  .size(800px, 100%);
  margin: 10px;
  flex-shrink: 0;
}

.overflow-auto {
  overflow: auto;
}
</style>